<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    #canvas {
      width: 600px;
      height: 450px;
    }
  </style>
</head>

<body>
  <canvas id="canvas" width="600" height="450"></canvas>
</body>
<script>
  const canvas = document.getElementById("canvas");
  let drawStatus;
  const ctx = canvas.getContext("2d");
  let timer = null;
  //   获取画布实时x和y
  const centerMap = () => {
    const bbox = canvas.getBoundingClientRect();
    return {
      x: canvas.width / 2,
      y: canvas.height / 2
    }
  }

  // 绘制灰色背景
  const drawImage1 = (cb) => {
    const img1 = new Image();
    img1.src = "./images/1.jpg";
    // 加载灰色背景
    img1.onload = () => {
      ctx.drawImage(img1, 0, 0, canvas.width, canvas.height);
      if (cb) {
        cb();
      }
    }
  }

  // 绘制正常背景
  const drawImage2 = () => {
    const img2 = new Image();
    img2.src = "./images/2.jpg";
    img2.onload = () => {
      ctx.drawImage(
        img2, 0, 0, canvas.width, canvas.height);
      ctx.restore();
    }
  }

  // 绘制圆
  const drawArc = (r = 100, cb) => {
    const {
      x,
      y
    } = centerMap();
    ctx.save(); // 保存绘制状态
    ctx.beginPath(); // 开始路径
    ctx.arc(x, y, r, 0, Math.PI * 2); // 绘制圆
    ctx.clip();
    if (cb) {
      cb();
    }
  }

  canvas.onmousedown = (e) => {
    const w = canvas.width;
    const h = canvas.height;
    if (timer) return;
    let r = 100;
    timer = setInterval(() => {
      r += 30;
      if (r <= w) {
        drawArc(r, () => {
          drawImage2();
        })
      } else {
        clearInterval(timer);
      }
    }, 100)
  }
  drawImage1();
</script>

</html>